
import React from 'react';
import { routerShape } from 'react-router';
import { inject, observer } from 'mobx-react';
import { observable, action, toJS } from 'mobx';
import { WeaForm, WeaTableNew, WeaSwitch } from 'comsMobx';
import { Button, Form, Modal} from 'antd'
import {
    WeaTop,
    WeaTab,
    WeaLeftTree,
    WeaLeftRightLayout,
    WeaSearchGroup,
    WeaRightMenu,
    WeaTools,
    WeaErrorPage,
    WeaPopoverHrm,
    WeaFormItem,
    WeaNewScroll,
    WeaOrgTree
} from 'ecCom'
import MeetingRoomDialog from './MeetingRoomDialog';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;
const confirm = Modal.confirm;
let _this = null;
@inject('meetingRoom')
@observer
class MeetingRoomList extends React.Component {
    static contextTypes = {
        router: routerShape
    }
    constructor(props) {
        super(props);
        _this = this;
        this.state = {
        }

    }
    componentDidMount() {//一些初始化请求
        const {meetingRoom} = this.props;
        meetingRoom.initCondition();
        meetingRoom.getRoomList();
    }
    componentWillReceiveProps(nextProps) {
    }

    componentWillUnmount() {
        //组件卸载时一般清理一些状态
    }
    componentDidUpdate() {
        if (this.refs.chartpie) {
            this.refs.chartpie.paint();
        }
    }

    render() {
        const {meetingRoom} = this.props;
        const {dataKey, conditioninfo, topTab, tableStore} = meetingRoom;
        return (
            <div  className={"metting-search"} style={{ height: 800 }}>
                <MeetingRoomDialog
                    type={meetingRoom.viewType}
                    visible={meetingRoom.showDialogFlag}
                    doClose={() => {
                        meetingRoom.closeDialog();
                        meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams())
                    } }
                    roomId = {meetingRoom.roomid}
                    />
                <WeaRightMenu datas={this.getRightMenu(dataKey, tableStore)} onClick={this.onRightMenuClick}>
                    <WeaTop
                        title={getLabel(383431,"会议室设置")}
                        loading={true}
                        icon={<i className='icon-coms-meeting' />}
                        iconBgcolor='#f14a2d'
                        buttons={this.getButtons(tableStore)}
                        buttonSpace={10}
                        showDropIcon={true}
                        dropMenuDatas={this.getRightMenu(dataKey, tableStore)}
                        onDropMenuClick={this.onRightMenuClick}
                    >
                        <div style={{ height: '100%' }}>
                        <WeaLeftRightLayout leftCom={this.getTree() } leftWidth={25} >
                        <WeaTab
                            searchType={['base','advanced']}
                            showSearchAd={meetingRoom.ifShowSearchAd}
                            //这里接收的是切换显隐之后相应的bool值
                            setShowSearchAd={bool => {
                                meetingRoom.setShowSearchAd(bool)
                            } }
                            selectedKey={meetingRoom.selectedKey}
                            searchsBaseValue={meetingRoom.adSearchForm.getFormParams().roomnames}
                            searchsAd={this.getSearchs() }
                            buttonsAd={ this.getTabButtonsAd()}
                            onSearch={v => {
                                meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
                            }}
                            onSearchChange={v => { 
                                meetingRoom.adSearchForm.updateFields({roomnames: {value: v}},true);
                            }}
                            keyParam="viewcondition"  //主键
                            countParam="groupid" //数量
                            onChange={this.changeData}
                            datas={topTab}
                            />
                        <div>
                                {tableStore?<WeaTable
                                hasOrder={true}
                                needScroll={true}
                                onOperatesClick={this.onOperatesClick}
                                sessionkey={dataKey}
                                comsWeaTableStore={tableStore}
                                />:''}
                        </div>
                        </WeaLeftRightLayout>
                    </div>
                    </WeaTop>
                </WeaRightMenu>

            </div>
        )
    }

    getTree() {
        return <WeaOrgTree
            needSearch
            isLoadSubDepartment={false}
            inputLeftDom = {`<b>${getLabel(25332,"组织结构")}</b>`}
            topPrefix={'meetingRoom'}
            treeNodeClick={this.treeNodeClick}
            />
    }

    treeNodeClick = (nodeObj) => {
        const id = nodeObj.node.props.id || '';
        const { meetingRoom } = this.props;
        meetingRoom.adSearchForm.updateFields({ subCompanyId: { value: id } }, true);
        meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
    }

    /**列表操作菜单点击事件*/
    onOperatesClick = (record, index, operate, flag, argumentString) => {
        const { meetingRoom } = this.props;
        let operateType = operate.index;
        if (operateType == 0){//edit
            meetingRoom.changeViewType('edit');
            meetingRoom.changeTab('info');
            meetingRoom.showDialog(record.id);
        } else if (operateType == 1) {//del
            this.doDel([record.id]); 
        } else if (operateType == 2){//lock
            this.changeLockStatus([record.id], true);
        } else if (operateType == 3){//unlock
            this.changeLockStatus([record.id], false);
        } else if (operateType == 4){//share
            meetingRoom.changeViewType('edit');
            meetingRoom.changeTab('share');
            meetingRoom.showDialog(record.id);
        } else if (operateType == 5) {//viewlog
            meetingRoom.changeViewType('preview');
            meetingRoom.showDialog(record.id);
        }
    }

    getButtons(tableStore){
        const { meetingRoom } = this.props;
        const selectedRowKeys = toJS(tableStore).selectedRowKeys;
        let btns = [];
        btns.push(<Button  type="primary"  onClick={() => { 
            meetingRoom.changeViewType('create');
            meetingRoom.showDialog() ;
        } }>{getLabel(83981,"新建")}</Button>);
        if (meetingRoom.showLocked){
            btns.push(<Button  type="primary"  disabled={selectedRowKeys.length === 0 ? true : false}  onClick={() => {
                this.changeLockStatus(selectedRowKeys, false);
            } }>{getLabel(22152,"解封")}</Button>);
        }else{
            btns.push(<Button  type="primary"  disabled={selectedRowKeys.length === 0 ? true : false}  onClick={() => {
                this.changeLockStatus(selectedRowKeys,true);
            } }>{getLabel(22151,"封存")}</Button>);
        }
        return btns
    }

    /**切换tab时触发 */
    changeData = (theKey)=>{
        const { meetingRoom } = this.props;
        meetingRoom.adSearchForm.updateFields({
            statuss: {
                value: [theKey]
            }
        }, true);
        meetingRoom.setShowSearchAd(false);
        meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
    }

    /**高级查询按钮定义 */
    getTabButtonsAd() {
        const { meetingRoom } = this.props;
        return [
            (<Button type="primary"
                onClick={() => {
                    meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
                    meetingRoom.setShowSearchAd(false);
                } }
                >
                {getLabel(197,"搜索")}
            </Button>),
            (<Button type="ghost" onClick={() => { meetingRoom.adSearchForm.reset() } }>{getLabel(2022,"重置")}</Button>),
            (<Button type="ghost" onClick={() => { meetingRoom.setShowSearchAd(false) } }>{getLabel(201,"取消")}</Button>)
        ]
    }

    /**右键菜单*/
    getRightMenu(dataKey, tableStore) {
        let btns = [];
        const {meetingRoom} = this.props;
        const selectedRowKeys = toJS(tableStore).selectedRowKeys;

        btns.push({
            icon: <i className='icon-Right-menu--search'/>,
            disabled: selectedRowKeys.length === 0 ? true : false,
            content: getLabel(126105,"新建")
        });
        if (meetingRoom.showLocked){
            btns.push({
                icon: <i className='icon-Right-menu--search'/>,
                disabled: selectedRowKeys.length === 0 ? true : false,
                content: getLabel(22152,"解封")
            });
        }else{
            btns.push({
                icon: <i className='icon-Right-menu--search'/>,
                disabled: selectedRowKeys.length === 0 ? true : false,
                content: getLabel(22151,"封存")
            });
        }
        btns.push({
            icon: <i className='icon-Right-menu--search'/>,
            disabled: selectedRowKeys.length === 0 ? true : false,
            content: getLabel(131966,"删除")
        });
        btns.push({
            key: 'colSet',
            icon: <i className='icon-coms-Custom'/>,
            content: getLabel(382660,"显示定制列"),
            onClick: key => {
                tableStore.setColSetVisible(dataKey, true);
                tableStore.tableColSet(dataKey, true);
            }
        });
        return btns
    }

    //右键菜单事件绑定
    onRightMenuClick = (key)=>{
        const {meetingRoom} = this.props;
        const {tableStore} = meetingRoom;
        const selectedRowKeys = toJS(tableStore).selectedRowKeys;
        if (key == '0') {
            // meetingSearch.doLoading(meetingSearch.adSearchForm.getFormParams());
            // meetingSearch.setShowSearchAd(false);
        } else if (key == '1') {
            if (meetingRoom.showLocked) {
                this.changeLockStatus(selectedRowKeys,false);
            }else{
                this.changeLockStatus(selectedRowKeys, true);
            }
        }else if(key=='2'){
            this.doDel(selectedRowKeys);
        }
    }

    //高级搜索group定义
    getSearchs() {
        const { meetingRoom } = this.props;
        const conditioninfo = toJS(meetingRoom.conditioninfo);
        const { adSearchForm } = meetingRoom;
        const { isFormInit } = adSearchForm;
        let group = [];
        isFormInit && conditioninfo.map(c => {
            let items = [];
            c.items.map(fields => {
                items.push({
                    com: (<WeaFormItem
                        label={`${fields.label}`}
                        labelCol={{ span: `${fields.labelcol}` }}
                        wrapperCol={{ span: `${fields.fieldcol}` }}>
                        <WeaSwitch fieldConfig={fields} form={adSearchForm} onChange={null/*todo*/} />
                    </WeaFormItem>),
                    colSpan: 1
                })
            });
            group.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />)
        });
        return group;
    }

    changeViewType(){
        const { meetingRoom } = this.props;
    }

    /**变更封存状态 true封存 false解封 */
    changeLockStatus(selectedRowKeys,lock){
        const {meetingRoom} = this.props;
        let ids = '';
        if(lock){
            confirm({
                title: getLabel(131329,"信息确认"),
                content: (<span style={{ 'color': 'red' }}>{`${getLabel(383432,"确定要封存已选择的会议室吗")}？`}</span>),
                onOk() {
                    for (var i = 0; i < selectedRowKeys.length; i++) {
                        if (ids != '') { ids += ','; }
                        ids += selectedRowKeys[i];
                    }
                    meetingRoom.lock({ ids: ids }).then(rdata => {
                        meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
                    }); 
                },
                onCancel() {

                }
            });
            
        }else{
            confirm({
                title:  getLabel(131329,"信息确认"),
                content: (<span style={{ 'color': 'red' }}>{`${getLabel(383433,"确定要解封已选择的会议室吗")}？`}</span>),
                onOk() {
                    for (var i = 0; i < selectedRowKeys.length; i++) {
                        if (ids != '') { ids += ','; }
                        ids += selectedRowKeys[i];
                    }
                    meetingRoom.unlock({ ids: ids }).then(rdata => {
                        meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
                    }); 
                },
                onCancel() {

                }
            });
        }
    }

    /**删除会议室 */
    doDel(selectedRowKeys){
        const {meetingRoom} = this.props;
        let ids = '';
        confirm({
            title: getLabel(131329,"信息确认"),
            content: (<span style={{ 'color': 'red' }}>{`${getLabel(383434,"确定要删除已选择的会议室吗")}？`}</span>),
            onOk() {
                for (var i = 0; i < selectedRowKeys.length; i++) {
                    if (ids != '') { ids += ','; }
                    ids += selectedRowKeys[i];
                }
                meetingRoom.del({ ids: ids }).then(rdata => {
                    meetingRoom.getRoomList(meetingRoom.adSearchForm.getFormParams());
                });
            },
            onCancel() {

            }
        });    
    }
}
//组件检错机制
class MyErrorHandler extends React.Component {
    render() {
        const hasErrorMsg = this.props.error && this.props.error !== "";
        return (
            <WeaErrorPage msg={hasErrorMsg ? this.props.error : getLabel(383324,"对不起，该页面异常，请联系管理员")} />
        );
    }
}

MeetingRoomList = WeaTools.tryCatch(React, MyErrorHandler, { error: "" })(MeetingRoomList);

export default MeetingRoomList
